<template>
    <div class="body">
        <div class="title">
            <span>欢迎使用</span>
            <h1>人力资源管理系统</h1>
        </div>
        <div class="handle" ref='handle' @mouseenter="changeFloat('stop')" @mouseleave="changeFloat('start')">
            <Login @handleChangeType="handleChangeType" :handleType="handleType"></Login>
            <Register @openDialog="openDialog" @handleChangeType="handleChangeType" :handleType="handleType"></Register>
            <Forget @handleChangeType="handleChangeType" :handleType="handleType"></Forget>
        </div>
        <EditEmployeeForm :EditEmployeeDialogVisible="EditEmployeeDialogVisible" :employeeForm="employeeForm"
            @closeDialog="closeDialog()">
        </EditEmployeeForm>
    </div>

</template>

<script lang="ts" setup>
import { ref } from 'vue';
import Login from "./component/Login.vue"
import Register from "./component/Register.vue"
import Forget from "./component/Forget.vue"
import EditEmployeeForm from "./component/EditEmployeeForm.vue";

//切换登录注册
const handleType = ref('login');
const handleChangeType = (type: string) => {
    if (type == "login") {
        handleType.value = 'login';
    } else if (type == "register") {
        handleType.value = 'register';
    } else if (type == "forget") {
        handleType.value = 'forget';
    }
    //有需求再做手机号注册功能
    // else if (type == 'phone') {
    //     handleType.value = 'phone';
    // }
}
//补充员工信息
let EditEmployeeDialogVisible = ref(false)
let employeeForm = ref({})
// 打开弹窗
const openDialog = (newValue: object) => {
    EditEmployeeDialogVisible.value = true;
    employeeForm.value = newValue;
};

// 关闭弹窗
const closeDialog = () => {
    EditEmployeeDialogVisible.value = false;
    handleChangeType('login')
};
//控制浮动
const handle = ref<HTMLElement | any>(null)
const changeFloat = (type: string) => {
    if (type === 'stop') {
        handle.value.classList.remove('float-animation');  // 移除动画类
        handle.value.classList.add('stop-animation');      // 添加停止动画类
    } else {
        // 先移除停止动画的类
        handle.value.classList.remove('stop-animation');

        // 强制浏览器重排
        handle.value.offsetHeight; // 触发浏览器重排

        // 延迟重新启动动画
        setTimeout(() => {
            handle.value.classList.add('float-animation');   // 添加浮动动画类
        }, 0);  // 延迟 0 毫秒
    }
}
</script>

<style scoped lang="scss">
/* 样式可以根据需要进行调整 */
.body {
    width: 100%;
    height: 100vh;
    background: url("../../assets/BG.jpg");
    background-size: cover;
    position: relative;

    .title {
        position: absolute;
        top: 20%;
        left: 10%;
        display: flex;
        flex-direction: column;
        justify-content: start;
        margin-bottom: 20px;
        text-shadow: 5px 5px 10px rgba(#000, 0.5);

        span {
            font-size: 30px;
            color: #fff;
        }

        h1 {
            font-size: 40px;
            color: #fff;
        }
    }

    .handle {
        position: absolute;
        top: 50%;
        right: 10%;
        transform: translateY(-50%);
        width: 350px;
        animation: float 10s infinite ease-in-out;
        box-shadow: 0 0 10px 15px rgba(#000, 0.1);
        transition: all .3s;


    }

    @keyframes float {
        0% {
            transform: translateY(-50%) translateX(0);
            /* 初始居中 */
        }

        25% {
            transform: translateY(-55%) translateX(5px);
            /* 稍微上浮与轻微右浮动 */
        }

        50% {
            transform: translateY(-50%) translateX(10px);
            /* 稍微右浮动 */
        }

        75% {
            transform: translateY(-45%) translateX(-5px);
            /* 稍微下浮与轻微左浮动 */
        }

        100% {
            transform: translateY(-50%) translateX(0);
            /* 回到原始位置 */
        }
    }

    /* 控制浮动动画的类 */
    .float-animation {
        animation: float 10s infinite ease-in-out;
    }

    /* 停止浮动的类 */
    .stop-animation {
        animation: none;
    }

}
</style>